<template>
  <div class="app-container">
    <vxe-form :data="formData">
      <vxe-form-item field="name">
        <template v-slot>
          <vxe-input
            v-model="formData.name"
            size="medium"
            placeholder="请输入名称"
          />
        </template>
      </vxe-form-item>
      <vxe-form-item>
        <template v-slot>
          <vxe-button
            type="submit"
            status="primary"
            size="medium"
            @click="onSearchBtnClick"
            >查询</vxe-button
          >
          <vxe-button type="reset"  size="medium">重置</vxe-button>
        </template>
      </vxe-form-item>
    </vxe-form>
    <vxe-toolbar >
      <template v-slot:buttons>
        <vxe-button
          v-auth="['admin', 'form:add']"
          size="medium"
          icon="el-icon-circle-plus-outline"
          status="primary"
          @click="onAddBtnClick"
          >新增</vxe-button
        >
      </template>
    </vxe-toolbar>
    <vxe-table
      ref="table"
      border
      size="mini"
      :tree-config="{ children: 'children' }"
      :data="list"
      :loading="loading"
      @checkbox-all="selectAllEvent"
      @checkbox-change="selectChangeEvent"
      resizable
      align="left"
      show-overflow
      show-header-overflow
    >
      <vxe-table-column type="checkbox" width="50" align="center"/>
      <vxe-table-column field="industry" title="行业" tree-node width="150"/>
      <vxe-table-column field="name" title="模板名称" tree-node width="150"/>
      <vxe-table-column field="info" title="描述" width="150"/>
      <vxe-table-column field="createTime" title="创建时间" width="150"/>
      <vxe-table-column field="updateTime" title="更新时间" width="150"/>
      <vxe-table-column title="操作" width="100" align="center">
        <template v-slot="{ row }">
          <el-tooltip content="编辑" placement="bottom" effect="light">
            <vxe-button
              v-auth="['admin', 'form:update']"
              size="mini"
              icon="el-icon-edit"
              status="primary"
              @click="onEditBtnClick(row)"
            />
          </el-tooltip>
        </template>
      </vxe-table-column>
    </vxe-table>
    <Form v-if="detail" v-model="detail" />
    <vxe-pager
      :current-page.sync="formData.currentPage"
      :page-size.sync="formData.pageSize"
      :total="total"
      :page-sizes="[10, 20, 100, 200]"
      :layouts="[
        'PrevJump',
        'PrevPage',
        'Number',
        'NextPage',
        'NextJump',
        'Sizes',
        'FullJump',
        'Total',
      ]"
      @page-change="handlePageChange"
    />
  </div>
</template>
<script>
import { forms } from '@/api/form'
import Form from './form'
export default {
  components: {
    Form
  },
  data() {
    return {
      loading: false,
      formData: {
        currentPage: 1,
        pageSize: 20
      },
      tableData: [],
      multipleSelection: [],
      detail: null,
      total: 0,
      data: [],
      checked: []
    }
  },
  computed: {
    list() {
      if (this.formData.name) {
        const options = { children: 'children' }
        const searchProps = ['name']
        const rest = this.$utils.searchTree(
          this.tableData,
          (item) =>
            searchProps.some(
              (key) =>
                this.$utils
                  .toString(item[key])
                  .toLowerCase()
                  .indexOf(this.formData.name) > -1
            ),
          options
        )
        // 搜索之后默认展开所有子节点
        this.$nextTick(() => {
          this.$refs.table.setAllTreeExpand(true)
        })
        return rest
      }
      return this.tableData
    }
  },
  created() {
    this.onSearchBtnClick()
  },
  methods: {
    selectAllEvent({ records }) {
      this.multipleSelection = records
    },
    selectChangeEvent({ records }) {
      this.multipleSelection = records
    },
    onAddBtnClick() {
      this.detail = {}
    },
    onEditBtnClick(row) {
      this.detail = row
    },
    onSearchBtnClick() {
      this.loading = true
      forms(this.formData).then((data) => {
        this.tableData = data.list
        this.total = data.total
        this.loading = false
      })
    },
    handlePageChange({ currentPage, pageSize }) {
      this.formData.currentPage = currentPage
      this.formData.pageSize = pageSize
      this.onSearchBtnClick()
    }
  }
}
</script>
